<template>
	<view class="content">
		<view class="main">
			<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
			<view class="seacher_top">
				<u-search v-model="value" shape="round" :clearabled="false" @custom="seacher(value)"></u-search>
			</view>
			<view class="phoneLiist" v-show="show1">
				<mypohonelist :phoneList="phoneList"></mypohonelist>
			</view>
			<view class="caisd" v-show="shows">
				<p class="psd">
					猜你想搜
				</p>
				<view class="curds">
					<view class="curds_list" v-for="(item,index) in curd_list" :key="index" @click="onclicks(index)">
						{{item.keyword}}
					</view>
				</view>
			</view>
			<view class="hb_list" v-show="shows">
				<image src="/static/火爆.png" style="width: 40rpx;height: 40rpx;margin-top: 25rpx;" mode=""></image>
				<p>热搜手机榜</p>
			</view>
			<view class="rs_curd" v-show="shows">
				<view class="rs_curd_list">
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Search,
		Kewords
	} from "../../../api/api.js"
	import navgatsVue from "../../../common/navgats/navgats.vue";
	import mypohonelist from "../../../common/my/phone-list/phone-list.vue"
	export default {
		data() {
			return {
				value:"",
				phoneList:[],
				show1:false,
				shows:true,
				navigationMsg:{
					title:"搜索",
					bgColor:"#FFFFFF",
					},
					curd_list:[]
			}
		},
		components:{
			navgatsVue,
			mypohonelist
		},
		onShow() {
			this.Keword()
		},
		methods: {
			onclicks(index){
				
				uni.navigateTo({
					url: `/pages/detail/detail?id=${this.curd_list[index].id}`
				})
			},
			async Keword(){
				let res= await Kewords()
				console.log(res.data.data.hot,"resss")
				this.curd_list=res.data.data.hot
			},
			async seacher(value){
				if(value==""){
					this.shows=true
					this.show1=false
					uni.showToast({
						title: '搜索结果不能为空',
						icon: 'none',
						duration: 2000
					})  
				}else{
					let data={
						page: 1, 
						limit: 10, 
						keyword: value, 
						type: 1
					}
					let res= await Search(data)
					this.shows=false
					this.show1=true
					console.log(res.data.data,"datas")
					this.phoneList=res.data.data.list
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		font-size: 30rpx;
		font-family: Microsoft JhengHei;
	}
	
	.content {
		width: 100vw;
		height: 94vh;
		/* position: absolute; */
		background-color: #ffffff;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		overflow-y: auto;
	}
	
	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.seacher_top{
		width: 90%;
		height: 100rpx;
	}
	.caisd{
		width: 90%;
		height: 300rpx;
		// background-color: aqua;
		.psd{
			font-size: 35rpx;
			line-height: 70rpx;
			font-weight: bold;
		}
		.curds{
			width: 100%;
			height: 200rpx;
			// display: flex;
		}
		.curds_list{
			width:fit-content;
			width:-webkit-fit-content;
			width:-moz-fit-content;
			float: left;
			background-color: #F6F6F6;
			margin-top: 10rpx;
			margin-left: 20rpx;
			border-radius: 10rpx;
		}
	}
	.hb_list{
		width: 90%;
		height: 100rpx;
		display: flex;
		// font-size: 50rpx;
		line-height: 100rpx;
		font-weight: bold;
	}
	.rs_curd{
		width: 90%;
		height: 800rpx;
		background: linear-gradient( #FCD748 0.1%, #FFFFFF 80%);
		border-radius: 20rpx;
	}
</style>
